<template>
	<div>
		
		<!-- 学生 -->
		<div v-if="role == 1" style="padding-bottom: 240rpx;">
			<view class="seo">
				<input class="seos" type="text" v-model="sear" placeholder="输入任务名称"/>
				<image class="stb" src="../../../static/seo.png" mode=""></image>
			</view>
			<div class="homework_list">
				<template v-if="homework_list.length !== 0">
					<div class="homework_item" v-for="item in homework_list" :key="item.workId">
						<div class="homework_line">
							<div class="homework_left">作业名称: </div>
							<div>{{ item.workName || "" }}</div>
						</div>
						<div class="homework_line" v-if="item.remark">
							<div class="homework_left">作业说明: </div>
							<div>{{ item.remark || "" }}</div>
						</div>
						<div class="homework_line">
							<div class="homework_left">开始时间: </div>
							<div>{{ item.startTime }}</div>
						</div>
						<div class="homework_line">
							<div class="homework_left">结束时间: </div>
							<div>{{ item.endTime }}</div>
						</div>
						<div class="homework_line tr">
							<span style="float: left;color: #B31711;" v-if="item.workStatus == 1">未读</span>
							<span style="float: left;color: #B31711;" v-else-if="item.workStatus == 2">未完成</span>
							<span style="float: left;color: #B31711;" v-else-if="item.workStatus == 3">已完成</span>
							<!-- <span style="float: right;display: inline-block;" v-if="item.workStatus == 3">分数: {{ item.score }}</span> -->
							<span style="float: right;">
								<span v-if="item.workStatus == 3" style="margin-right: 10rpx;">{{ item.score || 0 }}分</span>
								<span class="downFile" style="margin-right: 10rpx;" v-if="item.workStatus == 3" @click="tz_s(item.workId, item.workName, item.score)" >查看成绩</span>
								<span v-if="item.workStatus !== 3" style="margin-right: 10px;">0分</span>
								<span class="downFile" v-if="item.workStatus !== 3" @click="tz_complete(item.workId, item.workName)">开始作答</span>
							</span>
						</div>
					</div>
					
				</template>
				<template v-else>
					<div style="text-align: center;padding: 30rpx 0">
						暂无数据
					</div>
				</template>
			</div>
		
			<view class="style11" @click="tz_sems_score">
				<view style="text-align: center;line-height: 70upx;">学期</view>
				<view style="text-align: center;line-height: 30upx;">成绩</view>
			</view>
		</div>
		<!-- 教师 -->
		<div v-else-if="role == 2">
			<div class="fenlei_css">
				<div class="fenlei_menu" @click="fenlei1">作业分发</div>
				<div class="fenlei_menu" @click="fenlei2">作业成绩</div>
				<div class="fenlei_menu" @click="fenlei3">学期成绩</div>
				<div class="fenlei_menu" @click="fenlei4">学业成绩</div>
				<div class="fenlei_menu" @click="fenlei5">试题上传</div>
				<div class="fenlei_menu" @click="fenlei6">题库浏览</div>
			</div>
			<view class="seo">
				<input class="seos" type="text" v-model="sear" placeholder="输入作业名称"/>
				<image class="stb" src="../../../static/seo.png" mode=""></image>
			</view>
			<div class="homework_list">
				<template v-if="homework_list.length !== 0">
					<view class="sneirong" v-for="(item,index) in sears()" @click="tz(item.workId, item.workName)">
						<view class="neirong">
							<view class="nr_t">
								<view class="nr_ts f m-t3" style="display: flex;">
									<div style="width: 140rpx;">作业名称：</div>
									<div style="flex: 1;">{{item.workName || ""}}</div>
								</view>
								<text class="nr_tc m-t3 wcl">起始时间：{{item.startTime}}</text>
								<text class="nr_tc m-t1 wcl">结束时间：{{item.endTime}}</text>
							</view>
							<text class="nr_jd">完成比: {{ item.reciveCount == 0 ? '100' : (item.commitCount / item.reciveCount).toFixed(1) * 100 }} %</text>
						</view>
					</view>
				</template>
				<template v-else>
					<div style="text-align: center;padding: 30rpx 0">
						暂无数据
					</div>
				</template>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				role: "",
				pageNo: 1,
				pageSize: 9999,
				workName: "",
				homework_list: [],
				status_list: ['未读', '未完成', '已完成'],
				sear: ""
			}
		},
		computed:{
			Search(){
				if(this.sear){
					return this.homework_list.filter((value) =>{
						return value.workName.includes(this.sear)
					})
				}
			}
		},
		created() {
			this.getUserInfo();
		},
		methods: {
			fenlei1(){
				uni.navigateTo({
					url: "/pages/index/teacher/question_select"
				})
			},
			fenlei2(){
				uni.navigateTo({
					url: "/pages/index/teacher/job_score"
				})
			},
			fenlei3(){
				uni.navigateTo({
					url: "/pages/index/teacher/generator_score"
				})
			},
			fenlei4(){
				uni.navigateTo({
					url: "/pages/index/teacher/semester_score"
				})
			},
			fenlei5(){
				uni.navigateTo({
					url: "/pages/index/teacher/exam_upload"
				})
			},
			fenlei6(){
				uni.navigateTo({
					url: "/pages/index/teacher/question_browse"
				})
			},
			sears(){
				if(!this.sear){
					return this.homework_list
				}
				return this.Search
			},
			tz_sems_score() {
				uni.navigateTo({
					url: "./stu_sems_score"
				})
			},
			tz(workId, workName) {
				uni.navigateTo({
					url: "./tec_detail?workId=" + workId + "&workName=" + workName
				})
			},
			tz_complete(workId, workName) {
				uni.navigateTo({
					url: "./stu_complete?workId=" + workId + "&workName=" + workName
				})
			},
			tz_s(workId, workName, score) {
				uni.navigateTo({
					url: "./stu_detail?workId=" + workId + "&workName=" + workName + "&score=" + score
				});
			},
			getUserInfo() {
				this.pyReq(this.$http.getMyInfo, {}, (res) => {
					if (res.code == 0) {
						this.role = res.result.role;
						if(this.role == 2) {
							this.getWorkListTea();
						} else if(this.role == 1) {
							this.getWorkListStu();
						}
					}
				});
			},
			getWorkListTea() {
				const { workName, pageNo, pageSize } = this;
				this.pyReq(this.$http.getWorkListTea, { pageNo, pageSize, workName }, (res) => {
					if (res.code == 0) {
						this.homework_list = res.result.records;
					}
				});
			},
			getWorkListStu() {
				const { workName, pageNo, pageSize } = this;
				this.pyReq(this.$http.getWorkListStu, { pageNo, pageSize, workName }, (res) => {
					if (res.code == 0) {
						
						this.homework_list = res.result.records;
						
					}
				});
			}
		}
	}
</script>

<style>
	.fenlei_css{
		background: #B31610;
		width: 90%;
		display: flex;
		justify-content: space-between;
		border-top: 1px solid #fff;
		border-bottom: 1px solid #fff;
		flex-wrap: wrap;
		padding: 0 5%;
	}
	.fenlei_menu{
		border: 1px solid #FFF;
		color: #fff;
		padding: 5px 15px;
		border-radius: 7px;
		margin: 5px;
	}
	.homework_item {
		padding: 10rpx 20rpx;
		border: 1px solid #B31610;
		margin: 10rpx 20rpx;
		border-radius: 20rpx;
		padding-bottom: 20rpx;
	}
	.homework_line {
		display: flex;
		overflow: hidden;
		
	}
	.homework_left {
		width: 140rpx;
		white-space: nowrap;
		margin-bottom: 10rpx;
	}
	.tr {
		display: block;
		width: 100%;
		text-align: right;
	}
	.fixedButton {
		width: 200rpx;
		height: 200rpx;
		line-height: 200rpx;
		text-align: center;
		font-size: 40rpx;
		border-radius: 50%;
		background-color: skyblue;
		color: #fff;
		position: fixed;
		right: 30rpx;
		bottom: 30rpx;
	}
	.seo{
		position: relative;
		background: #B31610;
		height: 100upx;
		padding-top: 40upx;
	}
	.seos{
		width: 663upx;
		height: 60upx;
		border-radius: 10upx;
		background: #FFFFFF;
		margin: 0 auto;
		font-size: 24upx;
		padding-left: 47upx;
		box-sizing: border-box;
	}
	.stb{
		position: absolute;
		right: 74upx;
		top: 56upx;
		width: 28upx;
		height: 30upx;
	}
	.homework_list {
		padding: 0 30rpx;
	}
	.sneirong{
		margin: 0 auto;
		border: 1px solid #B31610;
		width: 659upx;
		/* height: 236upx; */
		border-radius: 15upx;
		margin-top: 30upx;
	}
	.neirong{
		margin: 20upx;
	}
	.nr_t{
		border-bottom: 1px solid #666666;
		padding-bottom: 20upx;
	}
	.nr_t text{
		display: block;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.nr_ts{
		font-size: 27upx;
		font-weight: 700;
		line-height: 70upx;
	}
	.nr_ts{
		font-size: 27upx;
		line-height: 70upx;
	}
	.nr_jd{
		display: block;
		text-align: end;
		font-size: 29upx;
		color: #B31610;
		font-weight: 700;
		margin-top: 35upx;
	}
	.style11{
		position: fixed;
		width: 120upx;
		height: 120upx;
		background-color: #B31711;
		z-index: 99;
		color: #FFF;
		font-size: 30upx;
		bottom: 40upx;
		right: 40upx;
		border-radius: 100%;
		box-shadow:2px 2px 5px #000;
	}
</style>
